 <template>
  <div class="container" ref="container">
    <div>
      <!--hotcity-->
      <div class="hot-city">
        <h2>热门城市</h2>
        <ul class="hot-city-list">
          <li class="hot-city-item" @click="returnCity(city.name)" v-for="city of hotCities" :key="city.id">{{ city.name }}</li>
        </ul>
      </div>
      <!--sort-->
      <div class="sort">
        <h2>字母排序</h2>
        <ul class="sort-list">
          <li @click="jump(key)" class="sort-item" v-for="(item,key) of cities" :key="key">{{ key }}</li>
        </ul>
      </div>
      <!--citylist-->
      <div>
        <div class="city-list" :ref="key" v-for="(item,key) of cities" :key="key">
          <h2>{{ key }}</h2>
          <ul class="city-list-list">
            <li class="city-list-item" @click="returnCity(city.name)" v-for="city of item" :key="city.id">{{ city.name }}</li>
          </ul>
        </div>
      </div>
      <!--滚动到顶部-->
      <div class="top">
        <span class="iconfont iconshuangjiantoushang"></span>回到顶部
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
  data () {
    return {
      scroll: ''
    }
  },
  props: ['hotCities', 'cities'],
  mounted () {
    // console.log(this.$refs.container)
    this.scroll = new BScroll(this.$refs.container, {
      click: true
    })
    // console.log(this.scroll)
  },
  methods: {
    jump (key) {
      this.scroll.scrollToElement(this.$refs[key][0], 2000)
    },
    returnCity (cityName) {
      this.changeCity(cityName)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  }
}
</script>

<style scoped lang="stylus">
  @import '~@/assets/css/common.styl'
  .container
    position: absolute
    left: 0
    right: 0
    bottom: 0
    top: 1.48rem
    z-index: -1
    background-color: #f5f5f5
   .hot-city-list
     background-color: #fff
     overflow: hidden
     position: relative
     &:before
       content: ''
       position: absolute
       width: 33.333%
       height: 100%
       left: 33.3333%
       border-left: 1px solid #ccc
       border-right: 1px solid #ccc
     .hot-city-item
       width: 33.333%
       border-bottom: 1px solid #ccc
       margin-bottom: -1px
       float: left
       line-height: 0.9rem
       text-align: center
        /* sort */
    .sort-list
      background-color: #fff
      overflow: hidden
      position: relative
      .sort-item
        width: 16.666%
        float: left
        line-height: 0.9rem
        text-align: center
    /* city-list */
    .city-list-list
      background-color: #fff
      overflow: hidden
      position: relative
      &:before
        content: ''
        position: absolute
        width: 25%
        height: 100%
        left: 25%
        border-left: 1px solid #ccc
        border-right: 1px solid #ccc
      &:after
        content: ''
        position: absolute
        width: 0%
        height: 100%
        right: 25%
        border-left: 1px solid #ccc
      .city-list-item
        width: 25%
        border-bottom: 1px solid #ccc
        margin-bottom: -1px
        float: left
        line-height: 0.9rem
        text-align: center
        $txtOverflow()
    .top
      position: fixed
      bottom: 0px
      right: 10px
      width: 60px
      height: 40px
      text-align: center
      background-color: #0ff
      font-size: 0.24rem
      &:hover
        background-color: #f00
      span
        display: block
</style>
